<template>
  <div class="nav">
    <scroll class="wrapper-nav"
            ref="wrapperNav"
            :data="activeName"
            :startX="50"
            :click="true"
            :scrollX="true"
            :scrollY="false"
            :eventPassthrough="'vertical'">
      <div class="content style2-nav clearfix">
        <span class="link"
          v-for="item in activeName"
          :key="item.id"
          :class="[id == item.id ? 'cur' : '','link'+activeName.length]"
          @click="onClick(item.id, item.activity_desc)">{{ (item.title).substring(0,8) }}</span>
        
      </div>
    </scroll>
  </div>
</template>

<script>
import Vue from 'vue'
import Scroll from '@/components/scroll/index'
// import { publicCenterParam } from '@/api/user/member/memberApi'
export default Vue.extend({
  props: {
    activeName: {
      type: Array,
      default() {
        return []
      }
    },
    id: {
      type: [String, Number],
      default: 0
    },
  },
  data() {
    return {
    }
  },
  methods: {
    onClick(id, describe) {
      this.$emit('activePage', id, describe)
    }
  },
  components: {
    Scroll
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/variables";
.nav {
  // background-color: $default;
  .wrapper-nav {
    width: 710px;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: scroll;
    &::-webkit-scrollbar{
      display: none;
    }
    .style2-nav {
      height: 80px;
      display: inline-block;
      white-space: nowrap;
      line-height: 80px;
      .link {
        position: relative;
        // min-width: 175px;
        margin: 0 8px;
        display: inline-block;
        text-align: center;
        font-size: 26px;
        color: #333333;
        // margin-top: -30px;
        &.link2{
          width: 355px;
        }
        &.link3{
          width: 236px;
        }
        &.cur {
          font-size: 28px;
          color: #e80001;
          &::after {
            @include gradient(right, #F20B22, #F20B22);
          }
        }
        // &::before {
        //   position: absolute;
        //   top: 50%;
        //   right: 0;
        //   content: "";
        //   width: 2px;
        //   height: 30px;
        //   background: #e6e6e6;
        //   transform: translateY(-50%);
        // }
        &:last-child::before {
          width: 0;
        }
        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          display: block;
          content: "";
          background: transparent;
          width: 56px;
          height: 4px;
          // border-radius: 3px;
        }
      }
    }
  }
}
</style>
